<template>
	<view>
		<view class="order-list">
			<view class="item2">
				<image class="sp-image" :src="goodInfo.image"></image>
				<view class="good-Info">
					<view class="good-name">{{goodInfo.name}}</view>
					<view class="good-yh">
						<!-- <view class="yh-icon">惠</view>1元购买核销后送100小时充电时长 -->
						<u-parse :content="goodInfo.activitydetails_content"></u-parse>
					</view>
					<view style="display: flex;">
						<view class="good-price">￥{{goodInfo.market_price}}</view>
					</view>
				</view>
			</view>
			<view class="item3">
				<view class="order-num">订单金额</view>
				<view class="good-price" style="text-align: right;">￥{{goodInfo.price}}</view>
			</view>

			<view class="item3 flex align-center" style="border-bottom: 1px solid #DCDCDC;">
				<view class="order-type flex align-center" style="width: 100%;">
					<view style="flex: 1;" class="flex align-center">
						<image class="wxpay-image" src="/static/images/wxpay.png"></image>
						微信
					</view>
					<view>
						<radio-group v-model="payType" @change="radioChange">
							<radio value="wx" style="transform:scale(0.7)" color="#ffd650" label="" v></radio>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="item4 flex align-center" style="margin-top: 0px;">
				<!-- <u--form labelPosition="left"  labelWidth="80" :>
					<u-form-item label="买家留言:" prop="message" >
						<u--input v-model="message" placeholder="您对本次交易的说明" border="none"></u--input>
					</u-form-item>
				</u--form> -->
				<view>买家留言：</view>
				<u--input placeholder="您对本次交易的说明" border="none" v-model="message"></u--input>
			</view>
			<view class="useBtn2" @click="orderpay()">
				去支付
			</view>

		</view>


	</view>


</template>

<script>
	import {
		postNewsDetail,
		shopcategory,
		shoplist,
		orderpay
	} from "../../api/home.js";
	import {
		url 
	} from "../../utils/url.js";
	import {
		bindingphone,
		postLogin
	} from '../../api/user.js'
	export default {
		data() {
			return {
				payType: null,
				message: "",
				show: true,
				text: 20,
				current: 0,
				activeStyle: {
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#808080',
					transform: 'scale(1)'
				},
				q: "",
				cate_id: "",
				lng: "",
				lat: "",
				newDetail: {}, // 咨询详情
				list4: [],
				shoplist: [],
				goodInfo: null
			}
		},
		onLoad(e) {
			if (e.goodInfo != null) {
				console.log("placeOrder", JSON.parse(e.goodInfo))
				this.goodInfo = JSON.parse(e.goodInfo);
			} else {
				uni.showToast({
					title: "商品信息异常",
					icon: "none"
				})
				uni.navigateBack({
					delta: 1
				});
				return;

			}

		},
		methods: {
			radioChange(e) {
				console.log(e);
				this.payType = e.detail.value;
			},
			async orderpay() {
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: "/pages/user/login",
						success() {
							uni.showToast({
								title: "请登录",
								icon: "none"
							})
						}
					})
					return
				}
				// if (uni.getStorageSync('userInfo').openid == null || uni.getStorageSync('userInfo').openid == "") {
					if (uni.getStorageSync('userInfo').openid == null || uni.getStorageSync('userInfo').openid == "orJVts3jrT6OzqJS_p6v4EoS-HB8") {
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: '请绑定微信号',
						confirmText: "去绑定",
						success: function(res) {
							if (res.confirm) {
								uni.login({
									provider: 'weixin',
									success: function(loginRes) {
										console.log("loginRes", loginRes);
										// 登录成功
										uni.getUserInfo({
											provider: 'weixin',
											success: function(info) {
												// 获取用户信息成功, info.authResult保存用户信息
												console.log("getUserInfo", info);
												let data = {
													code: loginRes.code,
													nickname: info.userInfo
														.nickName,
													avatar: info.userInfo
														.avatarUrl,
													sex: info.userInfo.gender,
													phone: uni.getStorageSync(
														'userInfo').mobile
												}
												console.log("wechatAuth", data);
												postLogin(data).then(res => {
													console.log(res.data)
													if (res.data.code ==
														1) {
														uni.setStorageSync(
															'userInfo',
															res.data
															.data);
														uni.setStorageSync(
															'uid', res
															.data.data
															.id);
														uni.setStorageSync(
															'token',
															res.data
															.data.token
															);
														uni.switchTab({
															url: "/pages/home/index"
														})
													} else {
														uni.showToast({
															title: res
																.msg,
															icon: "none"
														})
													}
												})
											}
										})
									},
									fail: function(err) {
										console.log("toWeChat", err);
										// 登录授权失败  
										// err.code是错误码
									}
								});
							} else if (res.cancel) {
								return;
							}
						}
					});
					return;
				}
				if (uni.getStorageSync('userInfo').mobile == '') {
					uni.navigateTo({
						url: "/pages/user/bind-phone",
						success() {
							uni.showToast({
								title: "请绑定手机号",
								icon: "none"
							})
						}
					})
					return
				}
				if (this.payType == null) {
					uni.showToast({
						title: "未选择支付方式",
						icon: "none"
					})
					return;
				}
				uni.showLoading({
					title: ''
				});
				var data = {
					token: wx.getStorageSync("token"),
					amount: this.goodInfo.price,
					type: "wechat",
					method: this.message,
					goods_id: this.goodInfo.id,
					shop_id: this.goodInfo.shop_id
				}
				orderpay(data).then(res => {
					if (res.data.code == 1) {
						uni.hideLoading();
						var wxconfig = res.data.data
						// this.callPay(wxconfig)
						this.onBridgeReady(wxconfig)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: ''
						})
					}
				})
			},

			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toSuccess() {
				uni.redirectTo({
					url: '/pages/home/paySuccess',
					fail: function(res) {
						// alert(JSON.stringify(res));
					}
				})
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				var that = this;
				if (!response.package) {
					return;
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: response.timeStamp,
					nonceStr: response.nonceStr,
					package: response.package,
					signType: response.signType,
					paySign: response.paySign,
					success: function(res) {
						uni.showLoading({
							title: '支付成功'
						});
						setTimeout(function() {
							uni.hideLoading();
							uni.redirectTo({
								url: '/pages/home/paySuccess',
								fail: function(res) {
									alert(JSON.stringify(res));
								}
							})
						}, 1000);
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						uni.showLoading({
							title: '支付失败'
						});
						uni.hideLoading();
					}
				});
				// WeixinJSBridge.invoke(
				// 	'getBrandWCPayRequest', {
				// 		"appId": response.appId, //公众号名称，由商户传入
				// 		"timeStamp": response.timeStamp, //时间戳，自1970年以来的秒数
				// 		"nonceStr": response.nonceStr, //随机串
				// 		"package": response.package,
				// 		"signType": response.signType, //微信签名方式：
				// 		"paySign": response.paySign //微信签名
				// 	},
				// 	function(res) {
				// 		if (res.err_msg === "get_brand_wcpay_request:ok") {
				// 			// 使用以上方式判断前端返回,微信团队郑重提示：
				// 			//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				// 			// 
				// 			uni.showLoading({
				// 				title: '支付成功'
				// 			});
				// 			setTimeout(function() {
				// 				uni.hideLoading();
				// 				uni.redirectTo({
				// 					url: '/pages/home/paySuccess',
				// 					  fail: function(res) {
				// 							alert(JSON.stringify(res));
				// 					  }
				// 				})
				// 			}, 1000);

				// 			// uni.switchTab({
				// 			// 	url: '/pages/home/paySuccess',
				// 			// 	  fail: function(res) {
				// 			// 			alert(JSON.stringify(res));
				// 			// 	  }
				// 			// })
				// 			// setTimeout(function() {
				// 			// 	that.getInfo();
				// 			// 	uni.switchTab({
				// 			// 		url: '/pages/user/index'
				// 			// 	})
				// 			// }, 1000);
				// 		} else {
				// 			uni.hideLoading();
				// 		}
				// 		WeixinJSBridge.log(response.err_msg);
				// 	}
				// );
			},
		}
	}
</script>

<style>
	.wxpay-image {
		width: 42rpx;
		height: 43rpx;
		margin-right: 10rpx;
	}

	.closeIcon {
		width: 38rpx;
		height: 38rpx;
		background-image: url('@/static/images/close.png');
		background-repeat: round;
		content: "";
		z-index: 10;
		position: absolute;
		bottom: -60rpx;
	}

	.useBtn2 {
		margin: 0 91rpx;
		position: absolute;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 		background: linear-gradient(to right, #98E05F, #0DE3AC);
 */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		bottom: 170rpx;
		width: 568rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DE3AC, #98E05F);
		border-radius: 44rpx;
	}

	.show-qrcode {
		width: 560rpx;
		height: 570rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.qr-codeBg {
		width: 416rpx;
		height: 405rpx;
		background-image: url('@/static/images/codeBg.png');
		background-repeat: round;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrCode {
		width: 278rpx;
		height: 278rpx;
	}

	.yh-icon {
		width: 26rpx;
		height: 26rpx;
		background: #F5750A;
		font-size: 10rpx !important;
		border-radius: 4rpx;
		content: "惠";
		color: white;
		margin-right: 4rpx;
		text-align: center;
	}

	.order-list {
		margin-bottom: 40rpx;
	}

	.item1 {
		display: flex;
		border-bottom: 1px solid #DCDCDC;
		background-color: white;
	}

	.shop-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 86rpx;
		flex: 1;
	}

	.status {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
		line-height: 86rpx;
	}

	.item2 {
		display: flex;
		padding: 30rpx 40rpx;
		background-color: white;
	}

	.sp-image {
		width: 164rpx;
		height: 164rpx;
		flex: 1;
	}

	.good-Info {
		margin-left: 20rpx;
		flex: 3;
	}

	.good-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.good-yh {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		display: flex;
		/* 		line-height: 69rpx; */
	}

	.good-price {
		flex: 3;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3434;
		line-height: 69rpx;
	}

	.good-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.item3 {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 40rpx;
	}

	.item4 {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}

	.order-num {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 69rpx;




		flex: 1;
	}

	.cancelBtn {
		background-color: rgba(238, 238, 238, 1);
		color: white;
		width: 170rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 72rpx;
		margin-right: 30rpx;
	}

	.useBtn {

		width: 170rpx;
		height: 72rpx;
		color: white;
		border-radius: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #98E05F, #0DE3AC);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
	}
</style>
